<section [hidden]="keyboardShow" [ngStyle]="outerBoxCssStyle|styleFilter" id="{{outerBoxId}}">
  <div [ngClass]="{'footerBg': tagData?.layout === 'footer'}" [ngStyle]="tagData?.cssStyle | styleFilter">
    <ng-container *ngIf="iconBtns && iconBtns.length > 0">
      <div class="icon-btn-bg" [ngStyle]="iconBtns[0].iconBgCssStyle  | styleFilter">
        <div class="icon-btn" [ngStyle]="item.cssStyle  | styleFilter" appDebounceClick (debounceClick)="check(item)"
          *ngFor="let item of iconBtns,let i=index">
          <div class="icon-inner-box" [ngStyle]="item?.iconInnerBoxCssStyle | styleFilter">
            <ng-container *ngIf="item.is_favorite === 'true'; else not_favovrite_btn">
              <!-- 有配置自定义收藏icon -->
              <ng-container *ngIf="item.collectionIcon!==undefined; else collectionIconTemplate">
                <img [ngStyle]="item.iconCssStyle | styleFilter" src="{{item.collectionIcon}}"
                  onerror="this.src='../assets/fw/tabbar_icon_collection_done.png'" alt="" class="icon"
                  [ngClass]="{'displayno': item.is_collection !== 'true'}">
                <img [ngStyle]="item.iconCssStyle | styleFilter" src="{{item.icon}}"
                  onerror="this.src='../assets/fw/tabbar_icon_collection.png'" alt="" class="icon"
                  [ngClass]="{'displayno': item.is_collection === 'true'}">
              </ng-container>
              <ng-template #collectionIconTemplate>
                <img [ngStyle]="item.iconCssStyle | styleFilter"
                  [ngClass]="{'displayno': item.is_collection !== 'true'}"
                  src="../assets/fw/tabbar_icon_collection_done.png" alt="" class="icon">

                <img [ngStyle]="item.iconCssStyle | styleFilter"
                  [ngClass]="{'displayno': item.is_collection === 'true'}"
                  src="../assets/fw/tabbar_icon_collection.png" alt="" class="icon">
              </ng-template>
            </ng-container>
            <ng-template #not_favovrite_btn>
              <img [ngStyle]="item.iconCssStyle | styleFilter" *ngIf="item.icon.indexOf('http') > -1 "
                src="{{item.icon}}" alt="" class="icon">
              <img [ngStyle]="item.iconCssStyle | styleFilter" *ngIf="item.icon.indexOf('http') === -1 "
                src="../assets/fw/{{item.icon}}" alt="" class="icon">
            </ng-template>
          </div>
          <span *ngIf="item.label && item.label.length > 0" class="label"
            [ngStyle]="item.labelCssStyle  | styleFilter">{{item.label}}</span>
          <span *ngIf="item.label1 && item.label1.length > 0" class="label"
              [ngStyle]="item.label1CssStyle  | styleFilter">{{item.label1}}</span>
          <span *ngIf="item.label2 && item.label2.length > 0" class="label"
                [ngStyle]="item.label2CssStyle  | styleFilter">{{item.label2}}</span>
          <span *ngIf="item.label3 && item.label3.length > 0" class="label"
                  [ngStyle]="item.label3CssStyle  | styleFilter">{{item.label3}}</span>
          <span *ngIf="item.label4 && item.label4.length > 0" class="label"
                [ngStyle]="item.label4CssStyle  | styleFilter">{{item.label4}}</span>
                <span *ngIf="item.label5 && item.label5.length > 0" class="label"
                  [ngStyle]="item.label5CssStyle  | styleFilter">{{item.label5}}</span>
          <span *ngIf="item.desc && item.desc.length>0" [ngStyle]="item.descCssStyle | styleFilter">{{item.desc}}</span>
        </div>
      </div>
    </ng-container>


    <!--1.9.19 蜂喔用户 找阿姨 -》 家电清洗 -》 立即下单 选择规格更新价格的按钮-->
    <ng-container *ngIf="isShowPriceBtn === true; else elsePriceTemplate">
      <ng-container *ngFor="let item of appGlobalService.priceBtns,let i=index">
        <ng-container *ngIf="item.action === 'price'; else elseTemplate">
          <p class="price" [ngStyle]="item.cssStyle  | styleFilter">
            <span class="price-label" *ngIf="item.label"
              [ngStyle]="item.labelCssStyle  | styleFilter">{{item.label}}</span>
            <span class="price-unit" *ngIf="item.unit" [ngStyle]="item.unitCssStyle  | styleFilter">{{item.unit}}</span>
            <span [ngStyle]="item.priceCssStyle  | styleFilter" class="price-price">
              <ng-container *ngIf="item.showAllPrice!==undefined; else elseShowAllPriceTemplate">
                {{item.desc}}
              </ng-container>
              <ng-template #elseShowAllPriceTemplate>
                {{getInterger(item.desc - 0 )| currency:'CNY':'':'1.0-0'}}<i class="pirce-digits">{{(item.desc - 0 |
                  currency:'CNY':'':'0.2-2') + '' | slice:-3}} </i>
              </ng-template>
            </span>
            <span *ngIf="item.label1 && item.label1.length > 0" class="label"
              [ngStyle]="item.label1CssStyle  | styleFilter">{{item.label1}}</span>
            <span *ngIf="item.label2 && item.label2.length > 0" class="label"
                [ngStyle]="item.label2CssStyle  | styleFilter">{{item.label2}}</span>  
          </p>

        </ng-container>
        <ng-template #elseTemplate>
          <button [disabled]="item.disabled === true || item.disabled === 'true'"
            [ngStyle]="item.cssStyle  | styleFilter" class="btn" [ngClass]="{
   'orange': item.cssColor === 'orange',
   'brown': item.cssColor === 'brown',
   'blue': item.cssColor === 'blue',
   'gray': item.cssColor === 'gray',
   'fw-left':item.cssColor==='fw-left',
   'fw-right':item.cssColor==='fw-right',
   'yellow': item.cssColor === 'yellow',
   'lightBule': item.cssColor === 'lightBule',
   'plain': item.plain === true || item.plain === 'true',
   'round': item.round === true || item.round === 'true',
   'big': item.size === 'big',
   'medium': item.size === 'medium',
   'small': item.size === 'small',        
   'mini': item.size === 'mini',
   'two': tagData?.data?.length === 2,
   'auto': tagData?.data?.length > 2,
   'right': i % 2 === 1,
   'left': i % 2 === 0,
   'first': i === 0 ,
   'second': i === 1 
  }"         appDebounceClick (debounceClick)="check(item)">
            <ng-container *ngIf="item.isCheck===undefined||!item.isCheck; else elseUncheckedTemplate">
              <font [ngStyle]="item.labelCssStyle  | styleFilter">
                {{item.label}}
              </font>
            </ng-container>
            <ng-template #elseUncheckedTemplate>
              <font [ngStyle]="item.checkLabelCssStyle  | styleFilter">
                {{item.checkLabel}}
              </font>
            </ng-template>
            <p *ngIf="item.desc && item.desc.length>0" [ngStyle]="item.descCssStyle | styleFilter">{{item.desc}}</p>
          </button>
        </ng-template>
      </ng-container>
    </ng-container>
    <ng-template #elsePriceTemplate>
      <ng-container *ngFor="let item of normalBtns,let i=index">
        <ng-container *ngIf="item.action === 'price'; else elseTemplate">
          <p class="price" [ngStyle]="item.cssStyle  | styleFilter">
            <span class="price-label" *ngIf="item.label"
              [ngStyle]="item.labelCssStyle  | styleFilter">{{item.label}}</span>
            <span class="price-unit" *ngIf="item.unit" [ngStyle]="item.unitCssStyle  | styleFilter">{{item.unit}}</span>
            <span [ngStyle]="item.priceCssStyle  | styleFilter" class="price-price">
              <ng-container *ngIf="item.showAllPrice!==undefined; else elseShowAllPriceTemplate">
                {{item.desc}}
              </ng-container>
              <ng-template #elseShowAllPriceTemplate>
                {{getInterger(item.desc - 0 )| currency:'CNY':'':'1.0-0'}}<i class="pirce-digits">{{(item.desc - 0 |
                  currency:'CNY':'':'0.2-2') + '' | slice:-3}} </i>
              </ng-template>
            </span>
          </p>

        </ng-container>
        <ng-template #elseTemplate>
          <button [disabled]="item.disabled === true || item.disabled === 'true'"
            [ngStyle]="item.cssStyle  | styleFilter" class="btn" [ngClass]="{
   'orange': item.cssColor === 'orange',
   'brown': item.cssColor === 'brown',
   'blue': item.cssColor === 'blue',
   'gray': item.cssColor === 'gray',
   'fw-left':item.cssColor==='fw-left',
   'fw-right':item.cssColor==='fw-right',
   'yellow': item.cssColor === 'yellow',
   'lightBule': item.cssColor === 'lightBule',
   'plain': item.plain === true || item.plain === 'true',
   'round': item.round === true || item.round === 'true',
   'big': item.size === 'big',
   'medium': item.size === 'medium',
   'small': item.size === 'small',        
   'mini': item.size === 'mini',
   'two': tagData?.data?.length === 2,
   'auto': tagData?.data?.length > 2,
   'right': i % 2 === 1,
   'left': i % 2 === 0,
   'first': i === 0 ,
   'second': i === 1 
  }"         appDebounceClick (debounceClick)="check(item)">
            <ng-container *ngIf="item.isCheck===undefined||!item.isCheck; else elseUncheckedTemplate">
              <font [ngStyle]="item.labelCssStyle  | styleFilter">
                <img *ngIf="item.img" [src]="item.img" [ngStyle]="item.imgCssStyle  | styleFilter" />{{item.closeTime}} {{item.label}}
              </font>

            </ng-container>
            <ng-template #elseUncheckedTemplate>
              <font [ngStyle]="item.checkLabelCssStyle  | styleFilter">
                {{item.checkLabel}}
              </font>
            </ng-template>
            <p *ngIf="item.desc && item.desc.length>0" [ngStyle]="item.descCssStyle | styleFilter"
              [innerHTML]="item.desc | parseStyle"></p>
          </button>
        </ng-template>
      </ng-container>
    </ng-template>




  </div>
</section>
<!-- 
  {
    "type": "tag",
    "style": "xxxx",
    "name": "xxxx",
    "layout": "body / footer 默认为body",
    "cssStyle": "padding:20px 0;text-align:center;",
    "data": [{
        "action": "link / submit / reset", //跳转，提交及重置
        "paramName": "string,string",
        "label": "确认购买",
        "cssColor": "orange / brown / blue / gray / lightBule",
        "plain": false, //是否朴素按钮,默认为false
        "round": false, //是否圆形按钮,默认为false
        "disabled": false, //是否禁用状态,false为可用,默认为false
        "size": "medium / small / mini", //目前只有中等和小的尺寸，默认为中等尺寸
        "submit": {
            "id": "string",
            "content": {
            }
        },
        "link": {
            "type": "page",
            "target": "pageId",
            "params": {}
        },
        "question": "确定结束本次服务？"
    }]
} -->